<template>
  <div>
    <div class="banner">
      <div id="header">
          <div class="nav">
              <div class="nav_lf">
                  <img :src="logo" class="logo">
                  <div class="item_wrap">
                      <div class="item" @click="goIndex">
                          <i class="index"></i>
                          <span v-html="$t('Browse')">首页</span>
                      </div>
                        <div class="item chatButton" @click="showChat">
                            <i class="chat"></i>
                            <div class="msgNumber" v-if="friendMsg>0"  :class="friendMsg>99?'text':''">{{friendMsg>99?'…':friendMsg}}</div>
                            <span v-html="$t('Chatting')">聊天</span>
                        </div>
                  </div>
              </div>
              <div class="nav_rt">
                  <div class="search">
                      <input type="text" :placeholder="$t('searchval')" @input="searchuser" v-model="searchname">
                      <div class="searchuserbox" v-if="searchuserArr.length>0">
                        <div class="user-item" v-for="(item,index) in searchuserArr" :key="index" @click="getuserinfo(item.id)">
                          <img :src="item.avatar" >
                          <p>{{item.name}}</p>
                        </div>
                      </div>
                  </div>
                  <div class="setting">
                      <div class="select set">
                            <span class="lang"><a href="javascript:;" v-html="$t('Setting')">设置</a></span>
                            <div class="drop">
                                <ul>
                                    <li @click="setInfor('avatar')">
                                        <a href="javascript:void(0);" class="updateimg">
                                            <span v-html="$t('avatarSettings')">头像设置</span>
                                        </a>
                                    </li>
                                    <li @click="setInfor('userInfor')">
                                        <a href="javascript:void(0);" class="update_userinfo">
                                            <span v-html="$t('dataSettings')">资料设置</span>
                                        </a>
                                    </li>
                                    <li @click="setInfor('password')">
                                        <a href="javascript:void(0);" class="update_pwd">
                                            <span v-html="$t('changePassword')">修改密码</span>
                                        </a>
                                    </li>
                                    <li @click="logout">
                                        <a href="javascript:;">
                                            <span v-html="$t('Logout')">退出系统</span>
                                        </a>
                                    </li>
                                </ul>
                          </div>
                      </div>
                  </div>
                  <div class="select zhong ">
                      <span class="lang"><a href="javascript:;" v-html="$t('lgPage.lang')">简体中文</a></span>
                      <div class="drop langs_list">
                          <ul>
                                <li @click="changelang('zh-CN','简体中文')">
                                    <a href="javascript:void(0);">简体中文</a>
                                </li>
                                <li  @click="changelang('zh-TW','繁体中文')">
                                    <a href="javascript:void(0);" >繁体中文</a>
                                </li>
                                <li @click="changelang('en-US','English')">
                                    <a href="javascript:void(0);">English</a>
                                </li>
                                <li @click="changelang('ja','わぶん')"> <a href="javascript:void(0);" class="set_langs" >わぶん</a> </li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!--  导航 end！-->
      <div id="user">
        <div class="avatar">
          <img :src="user.avatar" >
        </div>
        <div class="username">
          <i :class="user.grade==='anCrown'?'vip':(user.grade==='blueDiamond'?'blueDiamond':'')"></i>
          <span>{{user.name?user.name:user.userName}}</span>
        </div>
      </div>
    </div>
    <!-- ---banner--end! -->
    <div class="content">
      <div class="tab_wrap">
          <div class="tab_item" @click="changeTab('index')" :class="tabType==='index'?'active':''">{{$t('userPage.browse')}}</div>
          <div class="tab_item" @click="changeTab('pic')" :class="tabType==='pic'?'active':''">{{$t('userPage.pic')}}</div>
          <div class="tab_item" @click="changeTab('video')" :class="tabType==='video'?'active':''">{{$t('userPage.video')}}</div>
      </div>
      <div class="tab_cont index clearfix" v-if="tabType==='index'">
        <div class="lf">
          <div class="handle_wrap clearfix" v-if="usercont">
            <div class="item row-3" @click="adduser(user.id)">
              <img :src="add" alt="">
              <p>{{$t('IdPage.Friends')}}</p>
            </div>
            <div class="item row-3" @click="addlike(user.id)">
              <img :src="like" alt="">
              <p>{{$t('like')}}</p>
            </div>
            <div class="item row-3" @click="linkuser(user.id,user.name)">
              <img :src="chat" >
              <p>{{$t('Chatting')}}</p>
            </div>
            <div class="item row-2">
              <img :src="report" alt="">
              <p>{{$t('report')}}</p>
            </div>
            <div class="item row-2" @click="showReGift">
              <img :src="present" >
              <p>{{$t('present')}}</p>
            </div>
            <div class="item row-2"  @click="showRecharge">
              <img :src="menuCz">
              <p>{{$t('userPage.recharge')}}</p>
            </div>
            <div class="item row-2" @click="showUpgrade">
              <img :src="menuSj">
              <p>{{$t('userPage.upgrade')}}</p>
            </div>
          </div>
          <div class="user_infor" :class="usercont?'marginTop0':''">
            <div class="title">{{$t('userPage.personalFile')}}</div>
            <div class="userlist">
                <div class="row">
                  <span v-html="$t('userPage.Introduction')">简介</span>
                  <span>：</span>
                  <span>{{$t('userPage.Confidentiality')}}</span>
                </div>
                <div class="row">
                  <span v-html="$t('userPage.Sexualorientation')">性取向</span>
                  <span>：</span>
                  <span>{{user.like==='homosexual'?$t('likeList.homosexual'):(user.like==='oppositeSex'?$t('likeList.oppositeSex'):(user.like==='bisexual'?$t('likeList.bisexual'):$t('likeList.secrecy')))}}</span>
                </div>
                <div class="row">
                  <span v-html="$t('userPage.Emotionalstate')"></span>
                  <span>：</span>
                  <span>{{user.emotionalState==='single'?$t('emotionalStateList.single'):(user.emotionalState==='bePassionatelyInLove'?$t('emotionalStateList.bePassionatelyInLove'):(user.emotionalState==='married'?$t('emotionalStateList.married'):$t('emotionalStateList.secrecy')))}}</span>
                </div>
                <div class="row">
                  <span v-html="$t('userPage.Country')"></span>
                  <span>：</span>
                  <span>{{user.country!==null?user.country:$t('userPage.Confidentiality')}}</span>
                </div>
                <div class="row">
                  <span v-html="$t('userPage.City')"></span>
                  <span>：</span>
                  <span>{{$t('userPage.Confidentiality')}}</span>
                </div>
                <div class="row">
                  <span v-html="$t('userPage.Jobs')"></span>
                  <span>：</span>
                  <span>{{$t('userPage.Confidentiality')}}</span>
                </div>
                <div class="row">
                  <span v-html="$t('userPage.Income')"></span>
                  <span>：</span>
                  <span>{{user.income?user.income:$t('userPage.Confidentiality')}}</span>
                </div>
                <div class="row">
                  <span v-html="$t('userPage.Age')"></span>
                  <span>：</span>
                  <span>{{user.age!==null?user.age:$t('userPage.Confidentiality')}}</span>
                </div>
                <div class="row">
                  <span v-html="$t('userPage.Weight')"></span>
                  <span>：</span>
                  <span>{{user.weight?user.weight:$t('userPage.Confidentiality')}}</span>
                </div>
                <div class="row">
                  <span v-html="$t('userPage.Height')"></span>
                  <span>：</span>
                  <span>{{user.height?user.height:$t('userPage.Confidentiality')}}</span>
                </div>
                <div class="row">
                  <span v-html="$t('userPage.Education')"></span>
                  <span>：</span>
                  <span>{{$t('userPage.Confidentiality')}}</span>
                </div>
            </div>
          </div>
          <!-- <div class="picwall">
            <div class="title">
              <span>照片墙</span>
            </div>
            <div class="more">
              <img :src="more">
            </div>
          </div> -->
        </div>
        <div class="rt scrollbar">
          <div class="user-item" v-for="(item,index) in releasecont" :key="index">
              <div class="top">
                  <div class="avatar">
                      <img :src="item.member.avatar">
                  </div>
                  <div class="user-message">
                      <div class="name">{{item.member.name}}</div>
                      <div class="time">{{item.member.createDate}}</div>
                  </div>
              </div>
              <div class="content">
                  <div class="comment-img" v-if="item.message.type==='imageText'&&item.message.resources!==null" >
                    <img :src="item" v-for="(item,index) in item.message.resources" :key="index" @dblclick="amplify(item)">
                  </div>
                  <div class="comment-video" v-if="item.message.type==='videoText'&&item.message.resources!==null">
                    <video :src="item.message.resources" controls="controls"></video>
                  </div>
                  <p v-if="item.message.content!=='textIsnull'" v-html="item.message.content.replace(/\#[\u4e00-\u9fa5_a-zA-Z0-9]+\;/gi, emotion)"></p>
                  <div class="leaveWord-wrap">
                    <div class="del" @click="delmessage(item.message.id)" v-if="item.isOwn">
                      <img :src="del" >
                    </div>
                    <div class="leaveWord" @click="showComment(item.id,item.memberId,item.fcmid)">
                      <img :src="message" >
                      <span>({{item.commentNumber}})</span>
                    </div>
                  </div>
                  <div class="usercommentbox" v-if="commentId===item.id&&usercomment.length>0">
                    <div class="usercomment-item" v-for="(itemc,index) in usercomment" :key="index" >
                      <div class="user-img" v-if="itemc.member.avatar">
                        <img :src="itemc.member.avatar" >
                      </div>
                      <div class="usercomment-infor">
                        <div class="title clearfix">
                          <div class="name">{{itemc.member.name}}</div>
                          <div class="time">{{itemc.member.createDate}}</div>
                        </div>
                        <p v-html="itemc.content.replace(/\#[\u4e00-\u9fa5_a-zA-Z0-9]+\;/gi, emotion)"></p>
                      </div>
                    </div>
                  </div>
                  <!-- 评论 -->
                  <div class="dynamic" v-if="commentId===item.id">
                      <div class="dynamic_content">
                          <textarea v-model="commentContent"></textarea>
                      </div>
                      <div class="dynamic_bottom">
                          <div class="lf">
                              <div class="face" @click="toggelcommontEmotion">
                                  <img :src="face" >
                              </div>
                          </div>
                          <div class="send" v-html="$t('IdPage.Release')" @click="commentsubmit">发布</div>
                      </div>
                      <div class="facebox" :style="{height:ch}" @click.stop="hideCommont">
                          <emotion @emotion="handlecommont"></emotion>
                      </div>
                  </div>
              </div>
          </div>
            <div class="morecomment moreBtBox" v-if="releasecont.length>3">
              <div class="preBt" @click="morecomment('preBt')"></div>
              <div class="nextBt" @click="morecomment"></div>
            </div>
        </div>
      </div>
      <div class="tab_cont pic" v-else-if="tabType==='pic'">
        <!-- <div class="upbox clearfix">
          <div class="upload-img">
            <div class="title">{{$t('userPage.pic')}}</div>
            <div class="content" @click="showPic" >
              <Icon type="ios-cash" size="52" style="color: #3399ff;"></Icon>
            </div>
          </div>
          <div class="upload-wrap" v-if="!usercont">
            <p>{{$t('addpic')}}</p>
            <Upload
                ref="uploadpic"
                multiple
                type="drag"
                :action="picArryurl"
                :on-exceeded-size="handleMaxSize"
                :max-size="3072"
                :on-success="handleSuccess"
                :with-credentials="cookieAllow"
                name="files"
                multiple
              >
              <div style="padding: 20px 0">
                  <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                  <p>Click or drag files here to upload</p>
              </div>
            </Upload>
          </div>
          <div class="submit" @click="submitUpload" v-if="!usercont">
            <Button type="primary" >{{$t('Complete')}}</Button>
          </div>
        </div> -->
          <div class="user-item" v-for="(item,index) in userPic" :key="index">
              <div class="top">
                  <div class="avatar">
                      <img :src="item.member.avatar">
                  </div>
                  <div class="user-message">
                      <div class="name">{{item.member.name}}</div>
                      <div class="time">{{item.member.createDate}}</div>
                  </div>
              </div>
              <div class="content">
                  <div class="comment-img" v-if="item.message.type==='imageText'&&item.message.resources!==null">
                    <img :src="item" v-for="(item,index) in item.message.resources" :key="index" @dblclick="amplify(item)">
                  </div>
                  <p v-if="item.message.content!=='textIsnull'" v-html="item.message.content.replace(/\#[\u4e00-\u9fa5_a-zA-Z0-9]+\;/gi, emotion)"></p>
                  <div class="leaveWord-wrap">
                    <div class="del" @click="delmessage(item.message.id)" v-if="item.isOwn">
                      <img :src="del" >
                    </div>
                    <div class="leaveWord" @click="showComment(item.id,item.memberId,item.fcmid)">
                      <img :src="message" >
                      <span>({{item.commentNumber}})</span>
                    </div>
                  </div>
                  <div class="usercommentbox" v-if="commentId===item.id&&usercomment.length>0">
                    <div class="usercomment-item" v-for="(itemc,index) in usercomment" :key="index" >
                      <div class="user-img" v-if="itemc.member.avatar">
                        <img :src="itemc.member.avatar" >
                      </div>
                      <div class="usercomment-infor">
                        <div class="title clearfix">
                          <div class="name">{{itemc.member.name}}</div>
                          <div class="time">{{itemc.member.createDate}}</div>
                        </div>
                        <p v-html="itemc.content.replace(/\#[\u4e00-\u9fa5_a-zA-Z0-9]+\;/gi, emotion)"></p>
                      </div>
                    </div>
                  </div>
                  <!-- 评论 -->
                  <div class="dynamic" v-if="commentId===item.id">
                      <div class="dynamic_content">
                          <textarea v-model="commentContent"></textarea>
                      </div>
                      <div class="dynamic_bottom">
                          <div class="lf">
                              <div class="face" @click="toggelcommontEmotion">
                                  <img :src="face" >
                              </div>
                          </div>
                          <div class="send" v-html="$t('IdPage.Release')" @click="commentsubmit">发布</div>
                      </div>
                      <div class="facebox" :style="{height:ch}" @click.stop="hideCommont">
                          <emotion @emotion="handlecommont"></emotion>
                      </div>
                  </div>
              </div>
          </div>
          <div class="morecomment moreBtBox" v-if="userPic.length>3">
            <div class="preBt" @click="morePic('preBt')"></div>
            <div class="nextBt" @click="morePic"></div>
          </div>
      </div>
      <div class="tab_cont video" v-else>
          <div class="user-item" v-for="(item,index) in videoArr" :key="index">
              <div class="top">
                  <div class="avatar">
                      <img :src="item.member.avatar">
                  </div>
                  <div class="user-message">
                      <div class="name">{{item.member.name}}</div>
                      <div class="time">{{item.member.createDate}}</div>
                  </div>
              </div>
              <div class="content">
                  <div class="comment-video" v-if="item.message.type==='videoText'&&item.message.resources!==null">
                    <video :src="item.message.resources" controls="controls"></video>
                  </div>
                  <p v-if="item.message.content!=='textIsnull'" v-html="item.message.content.replace(/\#[\u4e00-\u9fa5_a-zA-Z0-9]+\;/gi, emotion)"></p>
                  <div class="leaveWord-wrap">
                    <div class="del" @click="delmessage(item.message.id)" v-if="item.isOwn">
                      <img :src="del" >
                    </div>
                    <div class="leaveWord" @click="showComment(item.id,item.memberId,item.fcmid)">
                      <img :src="message" >
                      <span>({{item.commentNumber}})</span>
                    </div>
                  </div>
                  <div class="usercommentbox" v-if="commentId===item.id&&usercomment.length>0">
                    <div class="usercomment-item" v-for="(itemc,index) in usercomment" :key="index" >
                      <div class="user-img" v-if="itemc.member.avatar">
                        <img :src="itemc.member.avatar" >
                      </div>
                      <div class="usercomment-infor">
                        <div class="title clearfix">
                          <div class="name">{{itemc.member.name}}</div>
                          <div class="time">{{itemc.member.createDate}}</div>
                        </div>
                        <p v-html="itemc.content.replace(/\#[\u4e00-\u9fa5_a-zA-Z0-9]+\;/gi, emotion)"></p>
                      </div>
                    </div>
                  </div>
                  <!-- 评论 -->
                  <div class="dynamic" v-if="commentId===item.id">
                      <div class="dynamic_content">
                          <textarea v-model="commentContent"></textarea>
                      </div>
                      <div class="dynamic_bottom">
                          <div class="lf">
                              <div class="face" @click="toggelcommontEmotion">
                                  <img :src="face" >
                              </div>
                          </div>
                          <div class="send" v-html="$t('IdPage.Release')" @click="commentsubmit">发布</div>
                      </div>
                      <div class="facebox" :style="{height:ch}" @click.stop="hideCommont">
                          <emotion @emotion="handlecommont"></emotion>
                      </div>
                  </div>
              </div>
          </div>
          <div class="morecomment moreBtBox" v-if="videoArr.length>3">
            <div class="preBt" @click="moreVideo('preBt')"></div>
            <div class="nextBt" @click="moreVideo"></div>
          </div>
      </div>
    </div>
    <!-- --footer-- -->
        <div class="footer">
            <div class="bottom_nav">
                <img src="https://brand.mastercard.com/content/dam/mccom/brandcenter/thumbnails/mcvsax_hrz_thmb_165_2x.png" alt="">
            </div>
            <div class="bottom_nav margin0" >
              <router-link tag="a" :to="{path:'/web', query:{id:'1'}}"> About Us</router-link>|
              <router-link tag="a" :to="{path:'/web', query:{id:'2'}}">Terms of Use</router-link>|
              <router-link tag="a" :to="{path:'/web', query:{id:'3'}}"> Privacy Policy</router-link>|
              <router-link tag="a" :to="{path:'/web', query:{id:'4'}}"> Dating Safety</router-link>|
              <router-link tag="a" :to="{path:'/web', query:{id:'5'}}"> Help Center</router-link> |
              <router-link tag="a" :to="{path:'/web', query:{id:'6'}}">Contact Us</router-link> |
            </div>
        </div>
        <!-- del--model -->
     <Modal
        v-model="modalDel"
        :title="$t('reminder')"
        class-name="vertical-center-modal"
        :ok-text="$t('yes')"
        width='300'
        @on-ok='delOK'
        :cancel-text="$t('no')">
        <p>{{$t('deltitle')}}</p>
    </Modal>
    <!-- 相册 -->
       <!-- <Modal
        v-model="modalPic"
        :title="$t('userPage.pic')"
        :mask-closable="closablePic"
        width='600'>
        <div class="userpicbox clearfix">
          <swiper :options="swiperOption">
                  <swiper-slide class="swiper-slide" v-for="(item,index) in userPic" :key="index">
                      <img :src="item"/>
                  </swiper-slide>
                  <div class="swiper-pagination"  slot="pagination"></div>
                  <div class="swiper-button-prev" slot="button-prev"></div>
                  <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
      <p slot="footer"></p>
    </Modal> -->
<!-- 设置 -->
    <Modal
      v-model="modalSet"
      class-name="vertical-center-modal"
      :title="$t('reminder')"
      :mask-closable="maskclosable"
      width='550'>
    <Tabs type="card" :value="setType">
        <TabPane :label="$t('avatarSettings')" icon="md-reverse-camera" name="avatar" >
          <h1>{{$t('avatarSettings')}}</h1>
          <img v-if="avatarImg" :src="avatarImg" style="display:block;width: 58px;height:58px;float:left;marginRight:20px">
          <div style="padding:10px 0">
              <Upload
              ref="upload"
              :on-success="handleUserPicSuccess"
              type="drag"
              :format="uploadPicType"
              :on-format-error="handleFormatError"
              :with-credentials="cookieAllow"
              :action="avatarUpload"
              :max-size="3072"
              :on-exceeded-size="handleMaxSizeuser"
              style="display: inline-block;width:58px;">
              <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
              </div>
          </Upload>
          </div>
          <div class="submit clearfix" @click="submitUploaduser">
              <Button type="primary" style="float:right">{{$t('Complete')}}</Button>
          </div>
        </TabPane>
        <TabPane :label="$t('dataSettings')" icon="md-person" name="userInfor">
            <div style="height:400px;overflow-y:auto">
              <Form :model="setUserInfor" :label-width="80" >
                <FormItem :label="$t('lgPage.name')" style="width:300px">
                    <Input v-model="setUserInfor.name"  placeholder="Enter something..."></Input>
                </FormItem>
                <!-- <FormItem :label="$t('lgPage.Mailbox')" style="width:300px">
                    <Input v-model="setUserInfor.mail" placeholder="Enter something..."></Input>
                </FormItem> -->
                <FormItem :label="$t('autograph')" style="width:300px">
                    <Input v-model="setUserInfor.autograph"  placeholder="Enter something..."></Input>
                </FormItem>
                      <FormItem :label="$t('userLike')">
                          <Select v-model="setUserInfor.like" style="width:00px">
                              <Option v-for="(item,index) in likeList" :value="item.value" :key="index">{{item.value==='homosexual'?$t('likeList.homosexual'):(item.value==='oppositeSex'?$t('likeList.oppositeSex'):(item.value==='bisexual'?$t('likeList.bisexual'):$t('likeList.secrecy')))}}</Option>
                          </Select>
                      </FormItem>
                      <FormItem :label="$t('userPage.Emotionalstate')">
                          <Select v-model="setUserInfor.emotionalState" style="width:200px">
                              <Option v-for="(item,index) in emotionalStateList" :value="item.value" :key="index">{{item.value==='single'?$t('emotionalStateList.single'):(item.value==='bePassionatelyInLove'?$t('emotionalStateList.bePassionatelyInLove'):(item.value==='married'?$t('emotionalStateList.married'):$t('emotionalStateList.secrecy')))}}</Option>
                          </Select>
                      </FormItem>
                <FormItem :label="$t('userPage.Income')" style="width:200px">
                    <Input v-model="setUserInfor.income"  placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem :label="$t('userPage.Height')" style="width:200px">
                    <Input v-model="setUserInfor.height" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem :label="$t('userPage.Weight')" style="width:200px">
                    <Input v-model="setUserInfor.weight" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem :label="$t('userPage.Country')" style="width:200px">
                    <Input v-model="setUserInfor.country" placeholder="Enter something..."></Input>
                </FormItem>
              </Form>
            </div>
            <div class="submit clearfix" @click="submitUserInfo(setUserInfor)">
                <Button type="primary" style="float:right;marginRight:30px">{{$t('yes')}}</Button>
            </div>
        </TabPane>
        <TabPane :label="$t('changePassword')" icon="md-contact" name="password">
          <div style="padding:20px">
            <Form :model="setPassword" :label-width="80">
              <FormItem :label="$t('pre_pwd')">
                  <Input v-model="setPassword.pre_pwd" type="password" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem :label="$t('new_pwd')">
                  <Input v-model="setPassword.new_pwd" type="password" placeholder="Enter something..."></Input>
              </FormItem>
            </Form>
          </div>
          <div class="submit clearfix" @click="submitPwd">
              <Button type="primary" style="float:right;marginRight:30px">{{$t('yes')}}</Button>
          </div>
        </TabPane>
    </Tabs>
    <div slot="footer"></div>
    </Modal>
    <!-- 礼物 -->
        <Modal
          v-model="modalGift"
          :mask-closable="maskclosable"
          class-name="vertical-center-modal"
          width='700'
        >
          <div slot="header" >
            <Button :type="giftType==='p'?'primary':'default'"  shape="circle" @click="checkgifType('p')">{{$t('present')}}</Button>
            <Button :type="giftType==='b'?'primary':'default'"  shape="circle" @click="checkgifType('b')" style="marginLeft:20px" >{{$t('gift.gifbox')}}</Button>
            <Button :type="giftType==='r'?'primary':'default'"  shape="circle" @click="checkgifType('r')" style="marginLeft:20px" >{{$t('gift.receive')}}</Button>
            <Button :type="giftType==='g'?'primary':'default'"  shape="circle" @click="checkgifType('g')" style="marginLeft:20px" >{{$t('gift.give')}}</Button>
          </div>
          <div class="buygift" v-if="giftType==='p'">
              <div class="buygiftbox">
                <Button :type="buyGifType==='real'?'success':'default'"  shape="circle" @click="checkbuyGifType('real')">{{$t('real')}}</Button>
                <Button :type="buyGifType==='virtual'?'success':'default'"  shape="circle" @click="checkbuyGifType('virtual')" style="marginLeft:20px">{{$t('virtual')}}</Button>
              </div>
              <div class="searchperson" v-if="showChatType==='gift'">
                  <Select
                      v-model="friendId"
                      filterable>
                      <Option v-for="(option, index) in giftfriendsArr" :value="option.id" :key="index">{{option.name}}</Option>
                  </Select>
              </div>
              <div class="cont-gift clearfix">
                <div class="gift-item" v-for="(item,index) in giftArr" :key="index" @click="checkgift(item.id)" :class="item.id===giftId?'active':''">
                  <div class="picbox">
                    <img :src="item.path" >
                  </div>
                  <div @click="giftdetails(item)">
                    <div class="gift-ft">
                      <div  class="gift_info name"><span class="giftHead">{{$t('gift.name')}}：</span>{{item.name}}</div>
                      <div class="gift_info price"><span class="giftHead">{{$t('gift.price')}}：</span>{{item.price}}</div>
                    </div>
                    <div  class="gift_info gift_bottom" :title="item.info"><span class="giftHead">{{$t('gift.infor')}}：</span>{{item.info}}</div>
                  </div>
                </div>
              </div>
              <div class="morecomment moreBtBox" v-if="giftArr.length>5">
                <div class="preBt" @click="moreGift('preBt')"></div>
                <div class="nextBt" @click="moreGift"></div>
              </div>
              <div class="gift-bottom">
                <div class="numberbox">
                  <Button type="primary" >{{$t('gift.Amount')}}</Button>
                  <div class="giftnumber">
                    <InputNumber  :min="1" v-model="giftnumber"></InputNumber>
                  </div>
                </div>
                <div class="sendbox">
                  <Button type="primary" >{{$t('gift.Comments')}}</Button>
                  <div class="msgbox">
                    <Input v-model="gifmsg" placeholder="Enter something..." style="width: 300px" />
                  </div>
                  <Button type="primary" shape="circle" @click="buygift">{{$t('gift.send')}}</Button>
                </div>
              </div>
          </div>
          <div class="mygift" v-else-if="giftType==='b'">
            <div class="gift-part" v-for="(item,index) in givgifArr" :key="index">
              <img :src="item.path">
              <div class="gift-c">
                <p><span class="giftHead">{{$t('gift.name')}}：</span>{{item.name}}</p>
                <p><span class="giftHead">{{$t('gift.price')}}：</span>{{item.price}}</p>
                <p><span class="giftHead">{{$t('gift.num')}}：</span>{{item.num}}</p>
              </div>
            </div>
            <div class="morecomment moreBtBox" v-if="receivelist.length>1">
              <div class="preBt" @click="moreGift('preBt')"></div>
              <div class="nextBt" @click="moreGift"></div>
            </div>
          </div>
           <div class="mygift" v-else-if="giftType==='r'">
            <div class="gift-part clearfix" v-for="(item,index) in receivelist" :key="index">
              <div class="information">
                <img :src="item.gift.path">
                <div class="gift-c">
                  <p><span class="giftHead">{{$t('gift.name')}}：</span>{{item.gift.name}}</p>
                  <p><span class="giftHead">{{$t('gift.price')}}：</span>{{item.gift.price}}</p>
                  <p><span class="giftHead">{{$t('gift.num')}}：</span>{{item.num}}</p>
                </div>
              </div>
              <div class="gift_user_infor">
                <img :src="item.fromMember.avatar">
                  <div class="gift-c">
                      <p><span class="giftHead">{{$t('gift.form')}}：</span>{{item.fromMember.name}}</p>
                      <p><span class="giftHead">{{$t('gift.count')}}：</span>{{item.goldNum}}</p>
                      <p><span class="giftHead">{{$t('gift.time')}}：</span>{{item.time}}</p>
                  </div>
              </div>
            </div>
              <div class="morecomment moreBtBox" v-if="receivelist.length>1">
                <div class="preBt" @click="moreGift('preBt')"></div>
                <div class="nextBt" @click="moreGift"></div>
              </div>
          </div>
          <div class="mygift" v-else>
            <div class="gift-part clearfix" v-for="(item,index) in giveGiftList" :key="index">
              <div class="information">
                <img :src="item.gift.path">
                <div class="gift-c">
                  <p><span class="giftHead">{{$t('gift.name')}}：</span>{{item.gift.name}}</p>
                  <p><span class="giftHead">{{$t('gift.price')}}：</span>{{item.gift.price}}</p>
                  <p><span class="giftHead">{{$t('gift.num')}}：</span>{{item.num}}</p>

                </div>
              </div>
              <div class="gift_user_infor">
                <img :src="item.fromMember.avatar">
                <div class="gift-c">
                  <p><span class="giftHead">{{$t('gift.to')}}：</span>{{item.toMember.name}}</p>
                  <p><span class="giftHead">{{$t('gift.count')}}：</span>{{item.goldNum}}</p>
                  <p><span class="giftHead">{{$t('gift.time')}}：</span>{{item.time}}</p>
                </div>
              </div>
            </div>
            <div class="morecomment moreBtBox" v-if="receivelist.length>1">
              <div class="preBt" @click="moreGift('preBt')"></div>
              <div class="nextBt" @click="moreGift"></div>
            </div>
          </div>
          <div slot="footer"></div>
        </Modal>
        <!-- 聊天室 -->
             <!-- :draggable="draggable" -->
        <Modal
          v-model="modalChat"
          width='1100'
          class-name="vertical-center-modal"
          :mask-closable="maskclosable"
          @on-visible-change="setChat"
        >
        <div slot="header" class="chat_header">
          <div class="chat-header-user">
              <div class="user_avatar">
                <img :src="oneself.avatar">
              </div>
              <div class="status" :class="oneself.isOnLine?'active':''">•</div>
              <div class="name">{{oneself.name}}</div>
              <Select v-model="userStatus" size="small" style="width:100px;marginLeft:10px" @on-change="changeuserStatus">
                <Option v-for="item in status" :value="item.value" :key="item.value">{{ item.name==='isonline'?$t('isonline'):$t('downline') }}</Option>
              </Select>
              <div class="chat-gift-icon" @click="showChatGift"></div>
          </div>
          <div class="translateInfor">
            <div>
              <p>{{$t('translateSurplus')}}：{{translateSurplus}}</p>
              <p class="price">{{$t('translatePrice')}}：{{translatePrice}}</p>
            </div>
            <InputNumber  :min="minNumber" v-model="translatNumber" style="margin:0 10px"></InputNumber>
            <Button @click="rechargeTranslate" type="primary" size="large" >{{$t('Recharge')}}</Button>
          </div>
        </div>
        <div slot="footer"></div>
        <div class="chat-room clearfix" style="backgroundImage:url()">
          <div class="userList">
            <div class="user-item  uncopy" v-for="(item,index) in chatList" :key="index" @click="getChatUserInfor(item)" :class="chatUser.id===item.id?'active':''">
              <div class="userimg clearfix">
                  <img :src="item.avatar">
              </div>
              <div class="user-cont" :class="item.isOnLine?'active':''">
                <div class="name">{{item.name}}</div>
              </div>
              <div class="delbt" @click="delchatuser(item.id)"></div>
              <div class="missNumber" v-if="item.missMsg">
                <div class="number">{{item.missMsg>99?'……':item.missMsg}}</div>
              </div>
            </div>
          </div>
          <div class="chat-cont" :style="{backgroundImage: 'url(' + chatbg + ')' }">
            <div class="chat-title uncopy">
              <div class="userImg">
                <img :src="chatUser.avatar" >
              </div>
              <div class="user-infor">
                <p>{{chatUser.name}}</p>
                <p>{{chatUser.isOnLine?'on-line':'Downline'}}</p>
              </div>
            </div>
            <div class="chat-text" id="scrolldIV">
              <div class="msg-item" v-for="(item,index) in chatRecords.records" :key="index" :class="item.formId===chatRecords.toMember.id?'':'self'">
                <div class="user">
                  <img :src="item.formId===chatRecords.toMember.id?chatRecords.toMember.avatar:chatRecords.friendMember.avatar">
                  <div class="title">
                    <span class="name">{{item.formId===chatRecords.toMember.id?chatRecords.toMember.name:chatRecords.friendMember.name}}</span>
                    <span class="time">{{item.sendDate}}</span>
                  </div>
                </div>
                <div class="msgcont">
                    <div class="msg-txt" v-html="item.content.replace(/\#[\u4e00-\u9fa5_a-zA-Z0-9]+\;/gi, emotion)" v-if="item.type==='text'" @contextmenu.prevent="msgMenu(item.content)"></div>
                    <div class="msg-img media-Item msg-txt" v-else-if="item.type==='image'" @dblclick="amplify(item.content)">
                      <img :src="item.content">
                    </div>
                    <div class="msg-video media-Item msg-txt" v-else-if="item.type==='video'">
                        <video :src="item.content" controls="controls">
                            your browser does not support the video tag
                        </video>
                    </div>
                    <div v-else>{{item.content}}</div>
                </div>
              </div>
            </div>
            <div class="chatSendbox">
              <div class="chat-facebox scrollbar" v-if="chatFace" @click.stop="showChatface">
                <div class="freeExpression" v-if="expressItemType==='freeExpression'">
                  <emotion @emotion="chatEmotion"></emotion>
                </div>
                <div class="vipExpression" v-else-if="expressItemType==='vipExpression'" @click.stop="">
                  <div class="expressItem" v-for="(item,index) in ownStoreList" :key="index" @click.stop="sendFace(item.path)">
                      <img :src="item.path" >
                  </div>
                </div>
                <div class="faceHandle" @click.stop="">
                    <Button @click.stop="chageFace('freeExpression')" type="success" size="small" >普通表情</Button>
                    <Button @click.stop="chageFace('vipExpression')" type="primary" size="small" >{{$t('IdPage.StickerStore')}}</Button>
                </div>
              </div>
              <div class="header">
                <div class="chathadle" @click="showChatface">
                  <img :src="chatface">
                </div>
                <div class="chathadle uploadimg" @click.stop="hideface" >
                  <Upload
                  ref="chatupload"
                  :format="uploadPicType"
                  :on-format-error="handleFormatError"
                  :on-success="picUploadSuccess"
                  :with-credentials="cookieAllow"
                  :action="chatpicUpload"
                  :max-size="3072"
                  :on-exceeded-size="handleMaxSize"
                  :show-upload-list="false"
                  >
                  <img :src="chatpic">
                  </Upload>
                </div>
                <div class="chathadle uploadvideo" @click.stop="hideface">
                  <Upload
                  ref="videochatupload"
                  :format="uploadVideoType"
                  :on-format-error="handleVideoFormatError"
                  :on-success="videoUploadSuccess"
                  :with-credentials="cookieAllow"
                  :action="chatvideoUpload"
                  :on-exceeded-size="handleMaxSize"
                  >
                  <img :src="chatvideo">
                  </Upload>
                </div>
              </div>
              <div class="chat-content">
                <textarea  @keyup.enter="msgSubmit" v-model="sendMsg"></textarea>
              </div>
              <div class="footer">
                <div class="footer-wrap">
                  <div class="bt-wrap">
                    <!-- <span class="close bt" @click="disconnect">关闭</span> -->
                    <Select v-model="chatLg" size="small" style="width:100px" @on-change="translate" placement="top-start">
                        <Option v-for="item in translateList" :value="item.code" :key="item.code">{{ item.name }}</Option>
                    </Select>
                    <span class="send bt" @click="send">发送</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        </Modal>
        <!-- 充值 -->
        <Modal
          v-model="modalRecharge"
          width='680'
          class-name="vertical-center-modal"
          :mask-closable="closablePic"
        >
        <div slot="header" class="modal-user-head" v-if="!userself">
          <img class="avatar" :src="user.avatar" >
          <span>{{user.name}}</span>
        </div>
        <div class="cont">
          <div class="rg-tl">
            <p>Billing Address: Gergana Enterprise Limited , 20 Gialtas, Agios Nikolaos, PC3100, Limassol, Cyprus</p>
            <p>{{$t('rechargeTip')}}<span style="color:red;padding:0 6px">1Gold = 1USD</span></p>
          </div>
          <div class="cont_Recharge">
            <div class="recharge-item" @click="rechargeCheck(index,item.id)" :class="rechargeType===index?'active':''" v-for="(item,index) in rechargeList" :key="index">
              <div class="lfnumber">{{item.gold}}</div>
              <div class="rtnumber">{{item.price}}US$</div>
            </div>
            <div class="recharge-item number" @click="rechargeCheck('custom','')" :class="rechargeType==='custom'?'active':''">
              <InputNumber  :min="minNumber" v-model="rechargeCount" ></InputNumber><span style="paddingLeft:5px">US$</span>
            </div>
          </div>
        </div>
        <div slot="footer" class="rg-ft">
          <span style="color:red;padding:0 15px"> 1Gold = 1USD</span>
            <Button @click="recharge" type="primary" size="large" >{{$t('Recharge')}}</Button>
        </div>
        </Modal>
        <!-- 升级 -->
         <Modal
          v-model="modalUpgrade"
          width='800'
          class-name="vertical-center-modal"
          :mask-closable="closablePic"
        >
        <div slot="header" >
          <p>
            <span>{{$t('UpgradeData.title.vip')}}：</span>
            <span v-if="user.grade==='blueDiamond'">{{$t('blueDiamond')}}</span>
            <span v-if="user.grade==='ordinary'">{{$t('ordinary')}}</span>
            <span v-if="user.grade==='anCrown'">{{$t('anCrown')}}</span>
            <span style="padding:0 20px">{{$t('UpgradeData.title.time')}}：{{user.vipDate}}</span>
            <!-- <span v-if="userself">{{$t('UpgradeData.title.balance')}}：{{user.gold}}</span> -->
          </p>
          <p style="color:red;fontSize:14px;marginTop:3px;line-height:1;">Billing Address: Gergana Enterprise Limited , 20 Gialtas, Agios Nikolaos, PC3100, Limassol, Cyprus</p>
        </div>
        <div class="contentUpgrade">
          <div class="lf vipItem">
            <div class="tl">
              <span>皇冠会员</span>
            </div>
            <div class="details clearfix">
              <div class="item-d" v-for="(item,index) in $t('UpgradeData.vip.data1')" :key="index">{{item}}</div>
            </div>
            <div class="upgradeList">
              <div class="upgrade-item" @click="changeVipType('anCrown',index,item.id)" :class="vipType==='anCrown'&&upIndex===index?'active':''" v-for="(item,index) in anCrownList" :key="index">
                <div class="lfnumber">{{item.price}}</div>
                <div class="rtnumber">{{item.price}}US$/<span>{{item.month}}</span><span>{{$t('month')}}</span></div>
              </div>
            </div>
          </div>
          <div class="rt vipItem">
            <div class="tl">
              <span>白金会员</span>
            </div>
            <div class="details clearfix">
              <div class="item-d" v-for="(item,index) in $t('UpgradeData.vip.data2')" :key="index">{{item}}</div>
            </div>
            <div class="upgradeList ">
              <div class="upgrade-item blueDiamond-item" @click="changeVipType('blueDiamond',index,item.id)" :class="vipType==='blueDiamond'&&upIndex===index?'active':''" v-for="(item,index) in blueDiamondList" :key="index">
                <div class="lfnumber">{{item.price}}</div>
                <div class="rtnumber">{{item.price}}US$/<span>{{item.month}}</span><span>{{$t('month')}}</span></div>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="rg-ft">
          <!-- :editable="false" -->
            <!-- <InputNumber  :min="minNumber" v-model="upgradeCount" @on-change="changeUpgradeMonth" ></InputNumber> -->
            <RadioGroup v-model="upgradeType">
              <Radio label="visa">
                  <Icon type="md-card"></Icon>
                  <span>VISA</span>
              </Radio>
              <Radio label="gold" style="padding:0 15px">
                  <Icon type="logo-usd"></Icon>
                  <span style="color:red;"> 1Gold = 1USD</span>
              </Radio>
            </RadioGroup>
            <Button @click="upgrade" type="primary" size="large" >{{$t('UpgradeData.bt')}}</Button>
        </div>
        </Modal>
        <!-- 发消息 -->
        <Modal
            v-model="modalsendMsg"
            class-name="vertical-center-modal"
            :ok-text="$t('yes')"
            width='300'
            @on-ok='chatlink'
            @on-visible-change="setChatLink"
            :cancel-text="$t('no')">
            <div slot="header" ><p>{{sendUserName}}</p></div>
            <Input v-model="sendUserMsg" placeholder="Enter something..."  />
        </Modal>
        <Modal
            v-model="modalTranslate"
            width='400'
            class-name="vertical-center-modal"
            :mask-closable="maskclosable"
        >
        <div slot="header"><span>{{$t('translate')}}</span></div>
        <div>
          <p class="preMsg" v-if="chooseMsg" v-html="chooseMsg.replace(/\#[\u4e00-\u9fa5_a-zA-Z0-9]+\;/gi, emotion)"></p>
          <p class="lasterMsg" v-if="translateMsg" v-html="translateMsg.replace(/\#[\u4e00-\u9fa5_a-zA-Z0-9]+\;/gi, emotion)"></p>
        </div>
        <div slot="footer">
          <Select v-model="chatMsgLg" size="small" style="width:100px" @on-change="translateItem" placement="bottom" placeholder="translate">
          <Option v-for="item in translateList" :value="item.code" :key="item.code">{{ item.name }}</Option>
        </Select>
        </div>
        </Modal>
          <Modal
          v-model="modalgiftDetails"
          class-name="vertical-center-modal"
          width='500'
          :mask-closable="maskclosable"
          >
            <div slot="header"><span>{{$t('present')}}</span></div>
            <div id="presentDetails">
              <div class="giftImg">
                <img :src="presentdetails.path" alt="" >
              </div>
              <p ><span class="giftHead">{{$t('gift.name')}}：</span>{{presentdetails.name}}</p>
              <p ><span class="giftHead">{{$t('gift.price')}}：</span>{{presentdetails.price}}</p>
              <p ><span class="giftHead">{{$t('gift.infor')}}：</span>{{presentdetails.info}}</p>
            </div>
            <div slot="footer"></div>
          </Modal>
          <Modal
          v-model="amplifyModla"
          width='600'
          class-name="vertical-center-modal"
          :mask-closable="maskclosable"
          >
            <div slot="header"><p style="height:0x;line-height:0"></p></div>
            <div>
              <img :src="amplifyPic" alt="" style="display:block;width:500px;max-height:700px;margin:0 auto">
            </div>
            <div slot="footer"></div>
          </Modal>
          <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<style lang='less' scoped>
    @import url('./index.less');
    .userpic{
      width: 58px;
      height:58px;
      line-height: 58px;
      border:1px dashed #ccc;
      margin: 10px 0 10px 20px;
      text-align: center;
      cursor: pointer;
    }
    .upload-wrap{
      p{
        text-align: center;
        line-clamp: 1.5;
      }
    }
    .userpicbox{
      width: 100%;
      box-sizing: border-box;
      height: 300px;
      overflow-x: auto
    }
    .userpicbox .userImgbox{
      float: left;
    }
    .demo-carousel{
      width: 100%;
      height: 100%;
    }
    .swiper-slide{
      padding: 10px;
      width: 100%;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    .swiper-slide img{
      display: block;
      width: 80%;
    }
</style>
<script>
import axios from '@/common/api'

import utils, {logout, CurentTime} from '@/common/api/tool.js'
import {
  menuCz, menuSj, add, like,
  chat, face, pic, walladd, logo, present,
  report, more, message, del, chatvideo,
  chatpic,
  chatface, chatbg
} from '@/assets/images'
import config from '@/config'
import Emotion from '@/components/Emotion/index'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
var avatarUpload = baseUrl + '/member/update/avatar'
var picArryurl = baseUrl + '/member/upload/images'
var chatpicUpload = baseUrl + '/member/upload/image'
var chatvideoUpload = baseUrl + '/member/upload/video'
var socket
var successMsgTip = utils.successMsgTip
var heartbeat = null
export default {
  data () {
    return {
      showChatType: 'gift',
      uploadPicType: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
      uploadVideoType: ['mp4', 'ogg', 'webm'],
      amplifyPic: '',
      amplifyModla: false,
      modalgiftDetails: false,
      spinShow: false,
      chatbg,
      chatvideo,
      chatpic,
      chatface,
      picH: '300',
      present,
      report,
      menuCz,
      menuSj,
      add,
      like,
      chat,
      face,
      pic,
      walladd,
      logo,
      lang: ' 简体中文',
      user: {},
      tabType: 'index',
      logout,
      more,
      usercont: true,
      releasecont: [],
      message,
      del,
      modalDel: false,
      delId: '',
      cookieAllow: true,
      avatarUpload,
      avatarImg: '',
      modalSet: false,
      modalRecharge: false,
      modalUpgrade: false,
      modalChat: false,
      chatList: [],
      ownStoreList: [],
      setType: 'avatar',
      setPassword: {
        pre_pwd: '',
        new_pwd: ''
      },
      picdata: {
        type: 'imageText'
      },
      picArryurl,
      picArry: [],
      userPic: [],
      modalPic: false,
      closablePic: false,
      picvalue: 0,
      swiperOption: {
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 自动轮播
        autoplay: {
          delay: 2000,
          // 当用户滑动图片后继续自动轮播
          disableOnInteraction: false
        },
        // 开启循环模式
        loop: true
      },
      modalGift: false,
      needMoney: '',
      giftArr: [],
      friendId: '',
      friendname: '',
      giftfriendsArr: [],
      giftfrind: '',
      giftnumber: 1,
      gifmsg: '',
      giftId: '',
      giftType: 'p',
      givgifArr: [],
      searchname: '',
      searchuserArr: [],
      videoArr: [],
      commentId: false,
      commentContent: '',
      ch: '0',
      releaseTotal: 100,
      giftBpage: 1,
      giftPpage: 1,
      giftRpage: 1,
      giftGpage: 1,
      giftBpages: 100,
      giftPpages: 100,
      giftRpages: 100,
      giftGpages: 100,
      buyGifType: 'real',
      usercomment: [],
      page: 1,
      chatRecords: [],
      chatUser: {},
      sendMsg: '',
      draggable: true,
      fullscreen: true,
      maskclosable: false,
      chatFace: false,
      chatpicUpload,
      chatvideoUpload,
      receiveGift: 0,
      modalsendMsg: false,
      sendUserName: '',
      sendUserId: '',
      sendUserMsg: 'Hi',
      RMPage: 1,
      rechargeCount: 1,
      rechargeType: 'custom',
      minNumber: 1,
      translateList: [],
      chatLg: '',
      blueDiamondUnitPrice: '',
      anCrownUnitPrice: '',
      blueDiamondPrice: '',
      anCrownPrice: '',
      blueDiamondMonth: 1,
      anCrownMonth: 1,
      upgradeCount: 1,
      vipType: 'anCrown',
      upIndex: 0,
      friendMsg: 0,
      videoPage: 1,
      picPage: 1,
      videoTotal: 100,
      otherMemberId: false,
      rechargeList: [],
      upgradeList: [],
      blueDiamondList: [],
      anCrownList: [],
      rechargeId: '',
      upgradeType: 'visa',
      vipSetMealId: '',
      userStatus: '',
      status: [{
        value: 1,
        name: 'isonline'
      }, {
        value: 0,
        name: 'downline'
      }],
      oneself: {},
      modalTranslate: false,
      chooseMsg: '',
      translateMsg: '',
      chatMsgLg: '',
      userself: false,
      translateSurplus: '',
      translatePrice: '',
      translatNumber: 1,
      setUserInfor: {
        name: '',
        mail: '',
        autograph: '',
        like: '',
        emotionalState: '',
        income: '',
        height: '',
        weight: '',
        country: ''
      },
      emotionalStateList: [{value: 'secrecy'}, {value: 'single'}, {value: 'bePassionatelyInLove'}, {value: 'married'}],
      likeList: [{value: 'secrecy'}, {value: 'homosexual'}, {value: 'oppositeSex'}, {value: 'bisexual'}],
      imgPages: 100,
      giveGiftList: [],
      receivelist: [],
      giftBpage: 1,
      giftPpage: 1,
      giftRpage: 1,
      giftGpage: 1,
      presentdetails: {},
      expressItemType: 'freeExpression'

    }
  },
  components: {
    Emotion
  },
  mounted () {
    var id = this.$route.query.id
    var user = this.$route.query.user
    if (user !== 'userself') {
      this.otherMemberId = id
    } else {
      this.userself = true
    }
    let missNumber = localStorage.getItem('missNumber')
    if (missNumber !== null && missNumber !== undefined) {
      missNumber = JSON.parse(missNumber)
      let number = missNumber.number
      this.friendMsg = number
    }
    this.init()
  },
  methods: {
    init () {
      this.getuser()
      this.getrelease()
      this.websocket()
      this.getself()
      this.getTranslateList()
      this.getTranslateInfor()
    },
    emotion (res) {
      let word = res.replace(/\#|\;/gi, '')
      const list = ['zb1_1', 'zb1_2', 'zb1_3', 'zb1_4', 'zb1_5', 'zb1_6', 'zb1_7', 'zb1_8', 'zb1_9', 'zb1_10', 'zb1_11', 'zb1_12', 'zb1_13', 'zb1_14', 'zb1_15', 'zb1_16', 'zb1_17', 'zb1_18', 'zb1_19', 'zb1_20', 'zb1_21', 'zb1_22', 'zb1_23', 'zb1_24', 'zb1_25', 'zb1_26', 'zb1_27', 'zb1_28', 'zb1_29', 'zb1_30', 'zb1_31', 'zb1_32', 'zb1_33', 'zb1_34', 'zb1_35', 'zb1_36', 'zb1_37', 'zb1_38', 'zb1_39', 'zb1_40', 'zb1_41', 'zb1_42', 'zb1_43', 'zb1_44', 'zb1_45', 'zb1_46', 'zb1_47', 'zb1_48', 'zb1_49', 'zb1_50', 'zb1_51', 'zb1_52', 'zb1_53', 'zb1_54', 'zb1_55', 'zb1_56', 'zb1_57', 'zb1_58', 'zb1_59', 'zb1_60', 'zb1_61', 'zb1_62', 'zb1_63', 'zb1_64', 'zb1_65', 'zb1_66', 'zb1_67', 'zb1_68', 'zb1_69', 'zb1_70', 'zb1_71', 'zb1_72', 'zb1_73', 'zb1_74', 'zb1_75', 'zb1_76', 'zb1_77', 'zb1_78', 'zb1_79', 'zb1_80', 'zb1_81', 'zb1_82', 'zb1_83', 'zb1_84', 'zb1_85', 'zb1_86', 'zb1_87', 'zb1_88', 'zb1_89', 'zb1_90', 'zb1_91', 'zb1_92', 'zb1_93', 'zb1_94', 'zb1_95', 'zb1_96', 'zb1_97', 'zb1_98', 'zb1_99', 'zb1_100', 'zb1_101', 'zb1_102', 'zb1_103', 'zb1_104']
      let index = list.indexOf(word)
      return `<img src="/static/face/${index}.gif" onerror="javascript:this.src='/pcChat/static/face/${index}.gif'" align="middle">`
    },
    changelang (type, word) {
      // 此处做了语言选择记录
      // var self = this
      localStorage.setItem('locale', type)
      // 修改显示语言
      this.$i18n.locale = type
      this.lang = word
      axios.request({
        url: '/change/language',
        method: 'GET',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        params: {
          'language': type
        }
      })
        .then(function (response) {
          // self.init()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    changeTab (type) {
      this.tabType = type
      if (type === 'video') {
        this.videoPage = 1
        this.getvideoList()
      } else if (type === 'index') {
        this.page = 1
        this.getrelease()
      } else {
        this.getimgbox()
      }
    },
    goIndex () {
      this.$router.push('/')
    },
    getuser (callback) {
      var self = this
      var id = self.$route.query.id
      var user = self.$route.query.user
      if (user === 'userself') {
        self.usercont = false
      }
      axios.request({
        url: '/memaber/list/get/' + id,
        method: 'GET'
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            self.user = res.data.data
            if (callback) {
              callback(res.data.data)
            }
          } else {

          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    adduser (id) {
      var self = this
      axios.request({
        url: '/member/add/friend/' + id,
        method: 'POST'
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            self.$Message.success(successMsgTip('operation'))
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    addlike (id) {
      var self = this
      axios.request({
        url: '/member/add/like/' + id,
        method: 'POST'
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            self.$Message.success(successMsgTip('operation'))
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    getrelease () {
      var self = this
      var page = self.page
      var pagesize = '5'
      var totalPage = Math.ceil((self.releaseTotal) / pagesize)
      var id = self.$route.query.id
      var user = self.$route.query.user
      var isMi = true
      var sendUrl = '/member/friendCircle/message/list/' + id
      if (user === 'userself') {
        sendUrl = '/member/friendCircle/message/list'
      } else {
        sendUrl = '/member/friendCircle/message/list/' + id
      }
      if (totalPage >= page) {
        axios.request({
          url: sendUrl,
          method: 'GET',
          params: {
            pageNumber: page,
            pageSize: pagesize,
            isMi: isMi
          }
        })
          .then(function (res) {
            var status = res.data.code
            if (status === 200) {
              self.releaseTotal = res.data.data.total
              self.releasecont = res.data.data.records
            }
          })
          .catch(function (error) {
            self.$Message.error(error)
          })
      } else {
        if (page > 1) {
          self.$Message.info(successMsgTip('noData'))
        }
      }
    },
    delmessage (id) {
      this.modalDel = true
      this.delId = id
    },
    delOK () {
      var self = this
      self.page = 1
      var id = this.delId
      axios.request({
        url: '/member/friendCircle/message/delete/' + id,
        method: 'post'
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            self.$Message.success(successMsgTip('operation'))
            let type = self.tabType
            if (type === 'video') {
              self.getvideoList()
            } else if (type === 'index') {
              self.getrelease()
            } else {
              self.getimgbox()
            }
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Modal.error(error)
        })
    },
    setInfor (type) {
      this.modalSet = true
      this.setType = type
    },
    handleUserPicSuccess (res, file) {
      var self = this
      var status = res.code
      if (status === 200) {
        var path = res.data.path
        self.avatarImg = path
        file.name = 'avatar'
      } else {
        if (status === 100) {
          // self.$router.push('/login')
        } else {
          self.$Message.error(res.data.msg)
        }
      }
    },
    handleMaxSizeuser (file) {
      this.$Notice.warning({
        title: 'Exceeding file size limit',
        desc: 'File  ' + file.name + ' is too large, no more than 2M.'
      })
    },
    submitUploaduser () {
      var self = this
      self.modalSet = false
      this.getuser(function () {
        self.$refs.upload.clearFiles()
      })
    },
    submitPwd () {
      var self = this
      var pre = self.setPassword.pre_pwd
      var newpwd = self.setPassword.new_pwd
      var pwdData = {
        password: pre,
        newPassword: newpwd
      }
      axios.request({
        url: '/member/update/password',
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        params: pwdData
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            self.modalSet = false
            self.setPassword.pre_pwd = ''
            self.setPassword.new_pwd = ''
            self.$Message.success(successMsgTip('operation'))
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    handleSuccess (res, file) {
      var self = this
      var status = res.code
      if (status === 200) {
        var path = res.data[0].path
        self.picArry.push(path)
        // file.name = 'avatar'
      } else {
        if (status === 100) {
          // self.$router.push('/login')
        } else {
          self.$Message.error(res.data.msg)
        }
      }
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: 'Exceeding file size limit',
        desc: 'File  ' + file.name + ' is too large, no more than 2M.'
      })
    },
    submitUpload () {
      // this.init()
      this.$refs.uploadpic.clearFiles()
      this.getpicArr()
    },
    getpicArr () {
      var self = this
      var imgArr = self.picArry
      // 图片上传成功
      axios.request({
        url: '/member/friendCircle/message/add',
        method: 'POST',
        data: {
          type: 'imageText',
          content: '图片',
          resources: imgArr
        }
      })
        .then(function (res) {
          var status = res.data.code
          var msg = res.data.msg
          if (status === 200) {
            self.$Message.success(successMsgTip('operation'))
            self.picArry = []
          } else {
            self.$Message.error(msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    getimgbox () {
      var self = this
      var picPage = this.picPage
      var id = self.$route.query.id
      var user = self.$route.query.user
      var isMi = true
      var sendUrl = '/member/friendCircle/message/image/list/' + id
      if (user === 'userself') {
        self.usercont = false
        sendUrl = '/member/friendCircle/message/image/list'
      } else {
        sendUrl = '/member/friendCircle/message/image/list/' + id
      }
      axios.request({
        url: sendUrl,
        method: 'GET',
        params: {
          pageNumber: picPage,
          isMi: isMi
        }
      })
        .then(function (result) {
          var status = result.data.code
          if (status === 200) {
            var records = result.data.data.records
            // var picbox = []
            // records.forEach(function (item) {
            //   let type = item.message.type
            //   if (type === 'imageText') {
            //     picbox = picbox.concat(item.message.resources)
            //   }
            // })
            // if (picbox.length > 0) {
            //   self.modalPic = true
            // }
            self.imgPages = result.data.data.pages
            self.userPic = records
          }
        })
        .catch(function (error) {
          self.$Modal.error(error)
        })
    },
    showChat () {
      let chatopen = this.modalChat
      if (!chatopen) {
        this.modalChat = true
      }
      this.friendMsg = 0
      localStorage.removeItem('missNumber')
      this.getuser()
      this.getchatuser()
      this.getOwnStoreList()// 表情包
    },
    getOwnStoreList () {
      var self = this
      axios.request({
        url: '/member/expression/have/list',
        method: 'post'
      })
        .then(function (res) {
          let status = res.data.code
          if (status === 200) {
            self.ownStoreList = res.data.data
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (err) {
          self.$Message.error('error:' + err)
        })
    },
    showPic () {
      this.getimgbox()
    },
    showReGift () {
      this.modalGift = true
      this.showChatType = 'gift'
      this.friendId = ''
      this.receiveGift = 0
      this.searchfriend()
      this.getgift()
    },
    showChatGift () {
      this.modalGift = true
      this.showChatType = 'chat'
      this.friendId = this.chatUser.id
      this.getgift()
    },
    showRecharge () {
      this.modalRecharge = true
      var self = this
      axios.request({
        url: '/member/recharge/gold/setMeal',
        method: 'GET'
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            var data = res.data.data
            let id = data[0].id
            self.rechargeCheck(0, id)
            self.rechargeList = data
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    showUpgrade () {
      this.modalUpgrade = true
      var self = this
      axios.request({
        url: '/member/recharge/vip/setMeal',
        method: 'GET'
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            var data = res.data.data
            self.vipSetMealId = data.anCrown[0].id
            self.blueDiamondList = data.blueDiamond
            self.anCrownList = data.anCrown
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    moreGift (p) {
      let giftType = this.giftType
      if (p === 'preBt') {
        if (giftType === 'p') {
          if (this.giftPpage > 1) {
            this.giftPpage--
            this.getgift()
          }
        } else if (giftType === 'b') {
          if (this.giftBpage > 1) {
            this.giftBpage--
            this.getgivgifArr()
          }
        } else if (giftType === 'r') {
          if (this.giftRpage > 1) {
            this.giftRpage--
            this.getReceiveGift()
          }
        } else {
          if (this.giftGpage > 1) {
            this.giftGpage--
            this.getGiveGift()
          }
        }
      } else {
        if (giftType === 'p') {
          if (this.giftPpage < this.giftPpages) {
            this.giftPpage++
            this.getgift()
          } else {
            if (this.giftPpage > 0) {
              this.$Message.info(successMsgTip('noData'))
            }
          }
        } else if (giftType === 'b') {
          if (this.giftBpage < this.giftBpages) {
            this.giftBpage++
            this.getgivgifArr()
          } else {
            if (this.giftBpage > 0) {
              this.$Message.info(successMsgTip('noData'))
            }
          }
        } else if (giftType === 'r') {
          if (this.giftRpage < this.giftRpages) {
            this.giftRpage++
            this.getReceiveGift()
          } else {
            if (this.giftRpage > 0) {
              this.$Message.info(successMsgTip('noData'))
            }
          }
        } else {
          if (this.giftGpage < this.giftGpages) {
            this.giftGpage++
            this.getGiveGift()
          } else {
            if (this.giftGpage > 0) {
              this.$Message.info(successMsgTip('noData'))
            }
          }
        }
      }
    },
    getgift () {
      var self = this
      var page = this.giftPpage
      let buyGifType = this.buyGifType
      let sendUrl = '/member/gift/list'
      if (buyGifType === 'real') {
        sendUrl = '/member/gift/list'
      } else {
        sendUrl = '/member/gift/list/fictitious'
      }
      axios.request({
        url: sendUrl,
        method: 'GET',
        params: {
          pageSize: 12,
          pageNumber: page
        }
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            var gift = res.data.data.records
            self.giftArr = gift
            self.giftPpages = res.data.data.pages
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    searchfriend () {
      var self = this
      var friendname = self.friendname
      axios.request({
        url: '/member/get/friend',
        method: 'GET',
        params: {
          pageSize: 10,
          name: friendname
        }
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            var records = res.data.data.records
            if (records.length > 0) {
              self.giftfriendsArr = records
            }
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    searchfrinds (query) {
      this.friendname = query
      this.searchfriend()
    },
    checkgift (id) {
      this.giftId = id
    },
    buygift () {
      var giftId = this.giftId
      var memberId = this.friendId
      var num = this.giftnumber
      var data = {giftId, memberId, num}
      var self = this
      axios.request({
        url: '/member/gift/give',
        method: 'post',
        params: data
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            self.$Message.success(successMsgTip('operation'))
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    checkgifType (val) {
      if (this.giftType === val) {
        return false
      }
      if (val === 'p') {
        this.giftType = 'p'
        this.getgift()
      } else if (val === 'b') {
        this.giftType = 'b'
        this.getgivgifArr()
      } else if (val === 'r') {
        this.giftType = 'r'
        this.getReceiveGift()
      } else {
        this.giftType = 'g'
        this.getGiveGift()
      }
    },
    checkbuyGifType (type) {
      if (this.buyGifType !== type) {
        this.buyGifType = type
        this.getgift()
      }
    },
    getgivgifArr () {
      var self = this
      var page = this.giftBpage
      axios.request({
        url: '/member/gift/warehouse/list',
        method: 'GET',
        params: {
          pageSize: 12,
          pageNumber: page
        }
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            var gift = res.data.data.records
            self.giftBpages = res.data.data.pages
            self.givgifArr = gift
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    searchuser () {
      var self = this
      var name = self.searchname
      if (name === '') {
        self.searchuserArr = []
        return false
      } else {
        axios.request({
          url: '/memaber/list/page/',
          method: 'get',
          params: {
            page: 1,
            name
          }
        })
          .then(function (res) {
            var status = res.data.code
            if (status === 200) {
              self.searchuserArr = res.data.data.records
            } else {
              self.$Message.error(res.data.msg)
            }
          })
          .catch(function (error) {
            self.$Message.error(error)
          })
      }
    },
    getuserinfo (userId, user) {
      var parm = {}
      if (user === 'userself') {
        parm = {
          id: userId,
          user: 'userself'
        }
      } else {
        parm = { id: userId }
      }
      this.$router.push({
        path: '/user',
        query: parm
      })
      this.searchuserArr = []
      this.init()
    },
    getvideoList () {
      var self = this
      let page = self.videoPage
      let id = self.otherMemberId
      var pagesize = '8'
      var totalPage = Math.ceil((self.videoTotal) / pagesize)
      var p = id ? '/' + id : ''
      if (totalPage >= page) {
        axios.request({
          url: '/member/friendCircle/message/video/list' + p,
          method: 'GET',
          params: {
            pageSize: pagesize,
            pageNumber: page,
            isMi: true
          }
        })
          .then(function (res) {
            var status = res.data.code
            if (status === 200) {
              var video = res.data.data.records
              self.videoTotal = res.data.data.total
              self.videoArr = video
            }
          })
          .catch(function (error) {
            self.$Message.error(error)
          })
      }
    },
    toggelEmotion () {
      let emotionHeight = this.emotionHeight
      if (emotionHeight === '250px') {
        this.emotionHeight = '0'
      } else {
        this.emotionHeight = '250px'
      }
    },
    showComment (id, replyMemberId, fcmid) {
      var contentshow = (this.commentId === id)
      this.commentContent = ''
      if (contentshow) {
        this.commentId = false
      } else {
        this.getcomment(fcmid)
        this.commentId = id
        this.fcmid = fcmid
        this.replyMemberId = replyMemberId
      }
    },
    handlecommont (i) {
      this.commentContent += i
    },
    commentsubmit () {
      var self = this
      var content = self.commentContent
      var fcmid = self.fcmid
      var replyMemberId = self.replyMemberId
      var data = {
        fcmid: fcmid,
        replyMemberId: replyMemberId,
        content: content
      }
      axios.request({
        url: '/member/friendCircle/comment',
        method: 'post',
        data: data
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            self.$Message.success(successMsgTip('operation'))
            self.commentContent = ''
            self.getcomment(fcmid)
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    toggelcommontEmotion () {
      let emotionHeight = this.ch
      if (emotionHeight === '260px') {
        this.ch = '0'
      } else {
        this.ch = '260px'
      }
    },
    hideCommont () {
      this.ch = '0'
    },
    getcomment (id) {
      var self = this
      axios.request({
        url: '/member/friendCircle/comment/list/' + id,
        method: 'GET'
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            self.usercomment = res.data.data
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    morecomment (p) {
      if (p === 'preBt') {
        if (this.page > 1) {
          this.page--
          this.getrelease()
        }
      } else {
        this.page++
        this.getrelease()
      }
    },
    morePic (p) {
      if (p === 'preBt') {
        if (this.picPage > 1) {
          this.picPage--
          this.getimgbox()
        }
      } else {
        if (this.picPage < this.imgPages) {
          this.picPage++
          this.getimgbox()
        } else {
          this.$Message.info(successMsgTip('noData'))
        }
      }
    },
    websocket () {
      var language = utils.getCookie('language') ? utils.getCookie('language') : localStorage.getItem('locale')
      var JSCOOKIE = utils.getCookie('JSCOOKIE') ? utils.getCookie('JSCOOKIE') : utils.getCookie('JSCOOKIE_test')
      var url = utils.basewSocketUrl + JSCOOKIE + '/' + language
      socket = new WebSocket(url)
      socket.onmessage = this.receiveMsg
      socket.onopen = function (event) {
        if (heartbeat !== null) {
          clearInterval(heartbeat)
        }
        heartbeat = setInterval(function () {
          if (socket.readyState === WebSocket.OPEN) {
            var timestamp = new Date().getTime()
            var data = {
              'uid': timestamp,
              'msgType': 'heartbeat',
              'content': ''
            }
            data = JSON.stringify(data)
            socket.send(data)
          } else {
            self.websocket()
          }
        }, 5000)
      }
      socket.onerror = function (e) {
        // console.log('socket---报错' + e)
      }
      socket.onclose = function (e) {
        // console.log('socket---关闭' + e)
      }
    },
    getChatUserInfor (item) {
      var self = this
      var id = item.id
      self.chatUser = item
      var newChatList = []
      if (item.missMsg !== null && item.missMsg !== undefined && item.missMsg !== 'undefined') {
        self.chatList.forEach(function (user) {
          if (user.id === id) {
            user.missMsg = null
          }
          newChatList.push(user)
        })
        self.chatList = newChatList
      }
      axios.request({
        url: '/member/record/message/list/' + id,
        method: 'get',
        params: {
          pageNumber: 1,
          pageSize: 999
        }
      })
        .then(function (result) {
          var status = result.data.code
          var msg = result.data.msg
          if (status === 200) {
            var chatRecords = result.data.data
            self.chatRecords = chatRecords
            self.$nextTick(() => {
              var div = document.getElementById('scrolldIV')
              div.scrollTop = div.scrollHeight
            })
          } else {
            self.$Message.error(msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    receiveMsg (event) {
      var self = this
      var t = CurentTime()
      var receivedData = event.data
      var msgdata = JSON.parse(receivedData)
      var userId = self.oneself.id
      var type = msgdata.msgType
      var msgItem = {}
      var IsGreeting = this.modalChat
      let FriendsRemind = config.chat.Friends_notification
      var newChatList = []
      var chatRoomOpen = self.modalChat
      var chatUser = self.chatUser// 当前聊天界面用户信息
      if (type === 'userLogoff' || type === 'usersOnline') {
        let statusMsg = JSON.parse(msgdata.content)
        let name = statusMsg.name
        let lineId = statusMsg.id
        let openLogoff = FriendsRemind.downline
        let openOnline = FriendsRemind.online
        if (type === 'userLogoff') {
          self.chatList.forEach(function (item) {
            if (item.id === lineId) {
              item.isOnLine = false
            }
            newChatList.push(item)
          })
          self.chatList = newChatList
          if (openLogoff) {
            statusMsg = '您的好友' + name + '下线'
            self.$Message.warning(statusMsg)
          }
        } else {
          self.chatList.forEach(function (item) {
            if (item.id === lineId) {
              item.isOnLine = true
            }
            newChatList.push(item)
          })
          self.chatList = newChatList
          if (openOnline) {
            statusMsg = '您的好友' + name + '上线'
            self.$Message.info(statusMsg)
          }
        }
        return false
      }
      if (type === 'gift') {
        self.receiveGift++
        utils.voicePrompt()
        let NoticeGiftMsg = successMsgTip('giftMsg')
        self.$Notice.success({
          duration: 0,
          render: h => {
            return h('div', [
              h(
                'img',
                {
                  style: {
                    cursor: 'pointer',
                    width: '30px',
                    height: '30px',
                    borderRadius: '50%',
                    display: 'block',
                    float: 'left'
                  },
                  attrs: {
                    src: avatar
                  },
                  on: {
                    click: () => {
                      self.$Notice.destroy()
                      self.showChat()
                      self.friendMsg = 0
                    }
                  }
                }
              ),
              h(
                'B',
                {
                  style: {
                    cursor: 'pointer',
                    padding: '0 0 0 20px',
                    fontSize: '16px',
                    lineHeight: '30px'
                  },
                  on: {
                    click: () => {
                      self.$Notice.destroy()
                      self.showChat()
                      self.friendMsg = 0
                    }
                  }
                },
                name
              ),
              h(
                'p',
                {
                  style: {
                    cursor: 'pointer',
                    padding: '8px 0 0 0'
                  },
                  on: {
                    click: () => {
                      self.$Notice.destroy()
                      self.showChat()
                      self.friendMsg = 0
                    }
                  }
                },
                NoticeGiftMsg
              )
            ])
          }
        })
        return false
      }
      if (type === 'logonFailure') {
        self.logout()
        utils.delCookie('language')
        utils.delCookie('JSCOOKIE')
        return false
      }
      if (type === 'sendMsg' || type === 'receiveMsg' || type === 'sendMsgSuccess') {
        msgdata = JSON.parse(msgdata.content)
        var name = msgdata.fromMember.name
        var avatar = msgdata.fromMember.avatar
        var fromMemberId = msgdata.fromMemberId
        msgItem = {
          formId: fromMemberId,
          name,
          avatar,
          content: msgdata.data,
          sendDate: t,
          type: msgdata.type
        }
        // eslint-disable-next-line eqeqeq
        if (fromMemberId == userId) {
          // 自己发的消息
          msgItem.userType = 'self'
        } else {
          // 不是自己发的
          // let NoticeMsg = successMsgTip('friendMsg')
          utils.voicePrompt()
          if (chatRoomOpen) {
            if (chatUser.id !== fromMemberId) {
              // 发消息的不是当前窗口用户
              self.chatList.forEach(function (item) {
                if (item.id === fromMemberId) {
                  if (item.missMsg !== null && item.missMsg !== undefined && item.missMsg !== 'undefined') {
                    item.missMsg++
                  } else {
                    item.missMsg = 1
                  }
                }
                newChatList.push(item)
              })
              self.chatList = newChatList
              return false
            }
            self.friendMsg = 0
            let missNumber = localStorage.getItem('missNumber')
            if (missNumber === null || missNumber === undefined) {
              localStorage.removeItem('missNumber')
            }
          } else {
            self.friendMsg++
          }
          msgItem.userType = 'other'
        }
      } else {
        // 提示消息
        msgItem.type = 'tip'
        msgItem.content = msgdata.content
        if (type === 'msgError') {
          self.$Message.error(msgdata.content)
          return false
        }
      }
      if (!IsGreeting) {
        return false
      }
      var msgList = self.chatRecords.records || self.chatRecords
      var newList = []
      if (msgList.length > 0) {
        msgList.forEach(function (item) {
          newList.push(item)
        })
      }
      newList.push(msgItem)
      self.chatRecords.records = newList
      this.$nextTick(() => {
        var div = document.getElementById('scrolldIV')
        div.scrollTop = div.scrollHeight
      })
    },
    socketSend (id, type, userMsg) {
      var self = this
      var chatuser = self.chatUser
      if (socket.readyState === WebSocket.OPEN) {
        var msg = userMsg || self.sendMsg
        var msgDetector = msg.replace(/\ +/g, '')
        msgDetector = msg.replace(/[\r\n]/g, '')
        if (msgDetector === '') {
          self.$Message.error('Cannot send an empty message!')
          return false
        }
        var memberId = id || chatuser.id
        var msgType = type || 'text'
        var timestamp = new Date().getTime()
        var data = {
          'uid': timestamp,
          'msgType': 'sendMsg',
          'content': JSON.stringify({
            'memberId': memberId,
            'data': msg,
            'type': msgType
          })
        }
        data = JSON.stringify(data)
        socket.send(data)
        this.sendMsg = ''
      } else {
        if (socket.readyState === WebSocket.CLOSING) {
          self.websocket()
        } else if (socket.readyState === WebSocket.CLOSED) {
          self.websocket()
        }
      }
    },
    msgSubmit () {
      this.send()
    },
    disconnect () {

    },
    send () {
      var self = this
      self.socketSend()
    },
    delchatuser (id) {
      var self = this
      axios.request({
        url: '/member/record/delete/' + id,
        method: 'post'
      })
        .then(function (result) {
          var status = result.data.code
          var msg = result.data.msg
          if (status === 200) {
            self.getchatuser()
          } else {
            self.$Message.error(msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    chatEmotion (i) {
      this.chatFace = false
      this.sendMsg += i
    },
    showChatface () {
      this.chatFace = !(this.chatFace)
    },
    picUploadSuccess (res) {
      var code = res.code
      var self = this
      if (code === 200) {
        var data = res.data.path
        this.$Modal.confirm({
          width: '450',
          content: '<img src="' + data + '" style="display:block;width:100%;max-height:500px;margin-left:-20px">',
          onOk: function () {
            self.socketSend(false, 'image', data)
          }
        })
      } else {
        this.$Message.error(res.msg)
      }
    },
    getchatuser () {
      var self = this
      axios.request({
        url: '/member/record/member/list',
        method: 'GET',
        params: {
          pageNumber: 1,
          pageSize: 9999
        }
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            var records = res.data.data.records
            if (records.length > 0) {
              var item = records[0]
              self.getChatUserInfor(item)
              self.chatList = records
            }
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    videoUploadSuccess (res) {
      var code = res.code
      var self = this
      if (code === 200) {
        var data = res.data.path
        this.$Modal.confirm({
          width: '450',
          content: '<video src="' + data + '" style="display:block;width:100%;max-height:500px;margin-left:-20px" controls="controls"></video>',
          onOk: function () {
            self.socketSend(false, 'video', data)
          }
        })
      } else {
        this.$Message.error(res.msg)
      }
      this.$refs.videochatupload.clearFiles()
    },
    setChat (res) {
      if (!res) {
        this.chatRecords = []
      }
    },
    hideChat () {
      this.modalChat = false
    },
    linkuser (id, name) {
      this.modalsendMsg = true
      this.sendUserName = name
      this.sendUserId = id
    },
    chatlink () {
      let text = this.sendUserMsg
      let id = this.sendUserId
      this.socketSend(id, 'text', text)
    },
    setChatLink (status) {
      if (!status) {
        this.sendUserName = ''
        this.sendUserId = ''
        this.sendUserMsg = 'Hi'
      }
    },
    rechargeCheck (type, id) {
      this.rechargeType = type
      this.rechargeId = id
    },
    getTranslateList () {
      var self = this
      axios.request({
        url: '/member/translate/list',
        method: 'get'
      })
        .then(function (result) {
          var status = result.data.code
          var msg = result.data.msg
          if (status === 200) {
            self.translateList = result.data.data
          } else {
            self.$Message.error(msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    translate () {
      var self = this
      var code = this.chatLg
      var sendMsg = this.sendMsg
      if (!code || sendMsg === '') {
        return false
      }
      axios.request({
        url: '/member/translate/translate',
        method: 'post',
        params: {
          code: code,
          text: sendMsg
        }
      })
        .then(function (result) {
          var status = result.data.code
          var msg = result.data.msg
          if (status === 200) {
            self.sendMsg = result.data.data
            self.chatLg = ''
          } else {
            self.$Message.error(msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    upgrade () {
      var self = this
      // var type = self.vipType
      var id = self.vipSetMealId
      var upgradeType = this.upgradeType
      var upgradeData = {
        vipSetMealId: id
      }
      var memberId = this.otherMemberId
      if (memberId) {
        upgradeData.memberId = memberId
      }
      self.$Spin.show()
      if (upgradeType === 'visa') {
        axios.request({
          url: '/member/recharge/vip',
          method: 'post',
          params: upgradeData
        })
          .then(function (result) {
            var status = result.data.code
            var msg = result.data.msg
            if (status === 200) {
              let isInside = result.data.data.isInside
              if (isInside) {
                self.$Message.success(successMsgTip('upgrade'))
                self.getuser()
              } else {
                let url = result.data.data.url
                window.location.href = url
              }
              self.modalUpgrade = false
            } else {
              self.$Spin.hide()
              self.$Message.error(msg)
            }
          })
          .catch(function (error) {
            self.$Spin.hide()
            self.$Message.error(error)
          })
      } else {
        // 金币升级
        axios.request({
          url: '/member/recharge/vip/gold',
          method: 'post',
          params: upgradeData
        })
          .then(function (result) {
            var status = result.data.code
            var msg = result.data.msg
            self.$Spin.hide()
            if (status === 200) {
              self.modalUpgrade = false
              self.$Message.success(successMsgTip('upgrade'))
              self.getuser()
            } else {
              self.$Message.error(msg)
            }
          })
          .catch(function (error) {
            self.$Spin.hide()
            self.$Message.error(error)
          })
      }
    },
    getVipUnitPrice () {
      var self = this
      axios.request({
        url: '/member/vip/unitPrice',
        method: 'get'
      })
        .then(function (result) {
          var status = result.data.code
          var msg = result.data.msg
          if (status === 200) {
            var price = result.data.data
            self.blueDiamondUnitPrice = price.blueDiamond
            self.anCrownUnitPrice = price.anCrown
            self.blueDiamondPrice = price.blueDiamond
            self.anCrownPrice = price.anCrown
          } else {
            self.$Message.error(msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    changeUpgradeMonth (val) {
      var self = this
      var type = self.vipType
      if (val > 0) {
        this.costVipFee(type, val)
      }
    },
    changeVipType (type, index, id) {
      this.vipType = type
      this.upIndex = index
      this.vipSetMealId = id
      this.upgradeCount = 1
    },
    recharge () {
      var self = this
      var rechargeData = {}
      var rechargeType = this.rechargeType
      var memberId = this.otherMemberId
      if (memberId) {
        rechargeData.memberId = memberId
      }
      if (rechargeType === 'custom') {
        let gold = this.rechargeCount
        rechargeData.gold = gold
      } else {
        let id = this.rechargeId
        rechargeData.goldSetMealId = id
      }
      self.$Spin.show()
      axios.request({
        url: '/member/recharge/gold',
        method: 'post',
        params: rechargeData
      }).then(function (res) {
        var status = res.data.code
        if (status === 200) {
          self.modalRecharge = false
          let isInside = res.data.data.isInside
          if (isInside) {
            self.$Message.success(successMsgTip('RGisInside'))
            self.getuser()
            self.$Spin.hide()
          } else {
            let url = res.data.data.url
            window.location.href = url
          }
        } else {
          self.$Spin.show()
        }
      })
        .catch(function (error) {
          self.$Spin.hide()
          self.$Message.error(error)
        })
    },
    costVipFee (type, monthNum) {
      var self = this
      axios.request({
        url: '/member/vip/gold/vip',
        method: 'get',
        params: {
          vipType: type,
          monthNum: monthNum
        }
      })
        .then(function (result) {
          var status = result.data.code
          var msg = result.data.msg
          if (status === 200) {
            let needgold = result.data.data
            if (type === 'blueDiamond') {
              self.blueDiamondPrice = needgold
              self.blueDiamondMonth = monthNum
            } else {
              self.anCrownPrice = needgold
              self.anCrownMonth = monthNum
            }
          } else {
            self.$Message.error(msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    moreVideo (p) {
      if (p === 'preBt') {
        if (this.videoPage > 1) {
          this.videoPage--
          this.getvideoList()
        }
      } else {
        this.videoPage++
        this.getvideoList()
      }
    },
    getself () {
      var self = this
      axios.request({
        url: '/member/info',
        method: 'GET'
      })
        .then(function (res) {
          var code = res.data.code
          if (code === 200) {
            let data = res.data.data
            let isOnLine = data.isOnLine
            if (isOnLine) {
              self.userStatus = 1
            } else {
              self.userStatus = 0
            }
            self.setUserInfor.autograph = data.autograph ? data.autograph : ''
            self.setUserInfor.name = data.name ? data.name : ''
            self.setUserInfor.emotionalState = data.emotionalState ? data.emotionalState : ''
            self.setUserInfor.weight = data.weight ? data.weight : ''
            self.setUserInfor.income = data.income ? data.income : ''
            self.setUserInfor.height = data.height ? data.height : ''
            self.setUserInfor.like = data.like ? data.like : ''
            self.setUserInfor.country = data.country ? data.country : ''
            self.oneself = data
          } else {
            if (code === 100) {
              self.logout()
            }
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    changeuserStatus (val) {
      var isOnLine = false
      var self = this
      if (val === 1) {
        isOnLine = true
      } else {
        isOnLine = false
      }
      axios.request({
        url: '/member/update/onLine',
        method: 'post',
        params: {
          isOnLine
        }
      }).then(function (res) {
        let code = res.data.code
        if (code === 200) {
          self.$Message.success(successMsgTip('operation'))
          self.getself()
        } else {
          self.$Message.error(res.data.msg)
        }
      })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    msgMenu (msg) {
      this.modalTranslate = true
      this.chooseMsg = msg
      this.translateMsg = ''
    },
    translateItem () {
      var self = this
      var code = this.chatMsgLg
      var sendMsg = this.chooseMsg
      if (!code || sendMsg === '') {
        return false
      }
      axios.request({
        url: '/member/translate/translate',
        method: 'post',
        params: {
          code: code,
          text: sendMsg
        }
      })
        .then(function (result) {
          var status = result.data.code
          var msg = result.data.msg
          if (status === 200) {
            let data = result.data.data
            let type = data.type
            if (type === 'success') {
              self.translateMsg = result.data.data.str
              self.chatMsgLg = ''
            } else if (type === 'recharge') {
              self.$Message.success(successMsgTip('translate'))
            } else {
              self.$Message.error(data.msg)
            }
          } else {
            self.$Message.error(msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    getTranslateInfor () {
      var self = this
      axios.request({
        url: '/member/translate/price',
        method: 'get'
      })
        .then(function (res) {
          let status = res.data.code
          if (status === 200) {
            let surplus = res.data.data.surplus
            let price = res.data.data.price
            self.translatePrice = price
            self.translateSurplus = surplus
          }
        })
        .catch(function () {
          self.$Message.error('error')
        })
    },
    rechargeTranslate () {
      let n = this.translatNumber
      var self = this
      axios.request({
        url: '/member/translate/purchase/' + n,
        method: 'post'
      })
        .then(function (res) {
          let status = res.data.code
          if (status === 200) {
            self.$Message.success(successMsgTip('RG'))
            self.getTranslateInfor()
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function () {
          self.$Message.error('error')
        })
    },
    submitUserInfo (val) {
      var self = this
      var locale = localStorage.getItem('locale')
      let name = val.name
      if (!name) {
        let msgTip = '昵称不能为空'
        if (locale === 'en-US') {
          msgTip = 'Nicknames cannot be empty'
        } else if (locale === 'zh-TW') {
          msgTip = '昵稱不能為空'
        } else if (locale === 'ja') {
          msgTip = 'ニックネームは空じゃない'
        }
        this.$Message.error(msgTip)
        return false
      }
      axios.request({
        url: '/member/update/info',
        method: 'post',
        data: val
      })
        .then(function (res) {
          let status = res.data.code
          if (status === 200) {
            self.$Message.success(successMsgTip('setuser'))
            self.getself()
            if (!self.otherMemberId) {
              self.getuser()
            }
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Message.error('error:' + error)
        })
    },
    getReceiveGift () {
      var self = this
      var sendUrl = '/member/gift/to/list'
      let userself = this.userself
      var page = this.giftRpage
      if (!userself) {
        let id = this.otherMemberId
        sendUrl = '/member/gift/to/list/' + id
      }
      axios.request({
        url: sendUrl,
        method: 'get',
        data: {
          pageNumber: page
        }
      })
        .then(function (res) {
          let status = res.data.code
          if (status === 200) {
            self.receivelist = res.data.data.records
            self.giftRpages = res.data.data.pages
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (err) {
          self.$Message.error('error:' + err)
        })
    },
    getGiveGift () {
      var self = this
      var sendUrl = '/member/gift/from/list'
      let userself = this.userself
      var page = this.giftRpage
      if (!userself) {
        let id = this.otherMemberId
        sendUrl = '/member/gift/from/list/' + id
      }
      axios.request({
        url: sendUrl,
        method: 'get',
        data: {
          pageNumber: page
        }
      })
        .then(function (res) {
          let status = res.data.code
          if (status === 200) {
            self.giftGpages = res.data.data.pages
            self.giveGiftList = res.data.data.records
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (err) {
          self.$Message.error('error:' + err)
        })
    },
    giftdetails (item) {
      this.presentdetails = item
      this.modalgiftDetails = true
    },
    amplify (src) {
      this.amplifyPic = src
      this.amplifyModla = true
    },
    handleFormatError (file) {
      var locale = localStorage.getItem('locale')
      let title = '文件格式有误'
      let desc = '请上传以下几种格式 png, jpg, jpeg, bmp, gif or png'
      if (locale === 'en-US') {
        title = 'The file format is incorrect'
        desc = 'please select png, jpg, jpeg, bmp, gif or png'
      } else {
        title = '文件格式有误'
        desc = ' 请上传以下几种格式 png, jpg, jpeg, bmp, gif or png'
      }
      this.$Notice.warning({
        title: title,
        desc: desc
      })
    },
    handleVideoFormatError (file) {
      var locale = localStorage.getItem('locale')
      let title = '文件格式有误'
      let desc = '请上传以下几种格式 mp4、ogg 、WebM'
      if (locale === 'en-US') {
        title = 'The file format is incorrect'
        desc = 'please select mp4、ogg or WebM'
      } else {
        title = '文件格式有误'
        desc = '请上传以下几种格式 mp4、ogg 、WebM'
      }
      this.$Notice.warning({
        title: title,
        desc: desc
      })
    },
    hideface () {
      this.chatFace = false
    },
    chageFace (type) {
      this.expressItemType = type
    },
    sendFace (data) {
      this.hideface()
      this.socketSend(false, 'image', data)
    }
  },
  destroyed () {
    let number = this.friendMsg
    let missNumber = {number}
    missNumber = JSON.stringify(missNumber)
    localStorage.setItem('missNumber', missNumber)
    if (!socket.close) {
      return false
    } else {
      socket.close(undefined)
    }
    if (heartbeat !== null) {
      clearInterval(heartbeat)
    }
  }
}
</script>
